<template>
  <el-radio-group class="radio-tab" v-model="activeName" v-on="$listeners" v-bind="$attrs">
    <el-radio-button :label="item.value" v-for="item in list" :key="item.value" isround>
      {{ item.label }}
    </el-radio-button>
  </el-radio-group>
</template>
<script>
export default {
  props: ['tabList'],
  data() {
    return { activeName: '', list: [] }
  },
  watch: {
    tabList: {
      handler(data) {
        if (data.length) {
          this.list = data
          this.activeName = data[0].value
        }
      },
      immediate: true
    }
  },
  methods: {
    changeEngine() { }
  }
}
</script>
<style scoped lang="scss">
.el-radio-group.radio-tab ::v-deep {
  .el-radio-button__inner {
    border-radius: 0;
    border: none;
    border-left: solid 1px #e5e6eb;
    box-shadow: none;
    font-size: 14px;
    padding: 4px 20px;
  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: var(--huocms-com-color-primary);
    background-color: transparent;
    border-color: #e5e6eb;
  }

  .el-radio-button:first-child .el-radio-button__inner {
    border-left: none;
  }

  .el-radio-button--small .el-radio-button__inner {
    padding: 0 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
  }
}
</style>
